<?php 
 	include './php/conexion.php';
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="=ISO-8859-1" http-equiv="Content-Type" content="text/html">
<script type="text/javascript" src="./javascript/tocadisco_temp.js"></script>
<!--  <script type="text/javascript" src="/javascript/tocadisco2.js"></script>
<script type="text/javascript" src="/javascript/tocadisco3.js"></script>-->
<script type="text/javascript" src="./javascript/jquery.js"></script>
<link rel="stylesheet" href="./stylus/tocadisco.css">
<title>Tocadisco</title>
</head>
    <body class="room-for-player">
		<header id="topbar">
			<div id="header">
			<span id="logo">Tocadisco</span>
			<span id="betagoogle">beta</span>
			</div>
			<div id="nav-container"></div> 
		</header>
		<nav id="wrapper">
			<div id="app">
			<div>
				<form id="search" method="GET">
					<span class="input-reduce">
					<input name="q"  placeholder="search" type="search" 
					<?php if ($_GET["q"]<>NULL) {
							echo "value=\"".$_GET["q"]."\"" ;
					}else  
								
						?>><span class="input-clear"></span>
						</span>
						
				</form>
				<?php
					$cancion = $_GET["q"];
					$conx = conectarBD();
					$resultados = consultarBD_cancion($conx,$cancion);
					echo "<ul class=\"song-list\">";
					while ($row=mysql_fetch_array($resultados,MYSQL_BOTH)) {
						echo "<li data-song-id=\"".$row["id"]."\" class=\"song-row\">";
						echo "<img src=\"http://2.bp.blogspot.com/_arbjzKBuHWU/SzvMBSPrs3I/AAAAAAAAAeY/wbAT8wcI3tw/s400/url.jpg\" width=\"50\" height=\"50\" >";
						echo "<h2 class=\"title\">".$row["nombre"]."</h2>";
						echo "<h3 class=\"byline\">".$row["artista"]."</h3>";
						echo "</li>";
					}
					echo "</ul>";						   
				?>
			</div>
			</div>
		</nav>
	<article>
		<section></section>
	</article>
	<footer>
		<div class="bottombar">
			<div id="station-controls" class="hidden"></div>
			<div id="player">
				<audio id="audio" controls="controls">
				</audio>
			</div>
			<div id="controls" class="playing">
				<div id="now-playing">
					<span class="playing-title"></span>
					<span class="playing-artist"></span>
				</div>
				<div id="progress">
					<span id="played" class="played"></span>/<span id="total" class="total"></span>
				<div>	
			</div>
		</div>	
	</footer>
    </body>
</html>